import React from 'react';
import { Form, Select, DatePicker, Button, Space, Input } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import type { ScanTaskQueryParams } from '../../types';

const { RangePicker } = DatePicker;
const { Option } = Select;

interface FilterBarProps {
  onFilter: (values: ScanTaskQueryParams) => void;
  onReset: () => void;
  loading?: boolean;
}

const FilterBar: React.FC<FilterBarProps> = ({ onFilter, onReset, loading = false }) => {
  const [form] = Form.useForm();

  const handleSubmit = (values: any) => {
    const params: any = {
      ...values,
      startTimeFrom: values.timeRange?.[0]?.format('YYYY-MM-DD HH:mm:ss'),
      startTimeTo: values.timeRange?.[1]?.format('YYYY-MM-DD HH:mm:ss'),
      pageNum: 1, // 重置到第一页
    };
    delete params.timeRange;
    onFilter(params as ScanTaskQueryParams);
  };

  const handleReset = () => {
    form.resetFields();
    onReset();
  };

  return (
    <Form
      form={form}
      layout="inline"
      onFinish={handleSubmit}
      style={{
        padding: '16px',
        background: '#fafafa',
        borderRadius: '6px',
        marginBottom: '16px'
      }}
    >
      <Form.Item name="statusList" label="状态">
        <Select
          mode="multiple"
          placeholder="选择状态"
          allowClear
          style={{ width: 180 }}
        >
          <Option value="RUNNING">运行中</Option>
          <Option value="SUCCESS">成功</Option>
          <Option value="FAILED">失败</Option>
          <Option value="SKIPPED">跳过</Option>
        </Select>
      </Form.Item>

      <Form.Item name="triggerTypeList" label="触发方式">
        <Select
          mode="multiple"
          placeholder="选择触发方式"
          allowClear
          style={{ width: 160 }}
        >
          <Option value="MANUAL">手动触发</Option>
          <Option value="SCHEDULE">定时触发</Option>
          <Option value="ARTIFACTORY">制品触发</Option>
          <Option value="RETRY">重试</Option>
        </Select>
      </Form.Item>

      <Form.Item name="gitBranch" label="分支">
        <Input placeholder="Git分支" allowClear style={{ width: 120 }} />
      </Form.Item>

      <Form.Item name="timeRange" label="开始时间">
        <RangePicker
          showTime={{ format: 'HH:mm:ss' }}
          format="YYYY-MM-DD HH:mm:ss"
          placeholder={['开始时间', '结束时间']}
          style={{ width: 320 }}
        />
      </Form.Item>

      <Form.Item>
        <Space>
          <Button 
            type="primary" 
            htmlType="submit" 
            icon={<SearchOutlined />}
            loading={loading}
          >
            查询
          </Button>
          <Button 
            onClick={handleReset}
            icon={<ReloadOutlined />}
          >
            重置
          </Button>
        </Space>
      </Form.Item>
    </Form>
  );
};

export default FilterBar;